<template>
  <div>
    <el-card style="margin:10px 0">
      <!-- 三级联动 -->
      <CategorySelect @getCateList="getCateList"
                      :isShowTable="!isShowTable"> </CategorySelect>
    </el-card>
    <el-card>
      <!-- 三块区域显示 -->
      <div v-show="screen===0">
        <el-button type="primary"
                   icon="el-icon-plus" :disabled="!category3Id" @click="addSpu">添加SPU</el-button>
        <el-table :data="spuList"
                  style="width: 100%">
          <el-table-column type="index"
                           label="序号"
                           width="80">
          </el-table-column>
          <el-table-column prop="spuName"
                           label="SPU名称"
                           width="width">
          </el-table-column>
          <el-table-column prop="description"
                           label="SPU描述"
                           width="width">
          </el-table-column>
          <el-table-column  
                           label="操作">
            <template slot-scope="{row,$index}">
              <hint-button type="success"
                           title="增加spu"
                           icon="el-icon-plus"
                           size="mini"></hint-button>
              <hint-button type="warning"
                           icon="el-icon-edit"
                           size="mini"
                           title="修改spu"  @click="changeSpu(row)"></hint-button>
              <hint-button type="info"
                           icon="el-icon-info"
                           size="mini"
                           title="查看当前spu全部sku列表"></hint-button>
              <hint-button type="danger"
                           icon="el-icon-delete"
                           size="mini"
                           title="删除spu"></hint-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- spu -->
      <SpuFrom v-show="screen===1" @screen1="changeScreen1" ref="screen1"> </SpuFrom>
      <SkuFrom v-show="screen===2"></SkuFrom >
    </el-card>
    <el-pagination style="text-align:center"
                   @size-change="handleSizeChange"
                   @current-change="getSpulist"
                   :current-page="pageNum"
                   :page-sizes="[3, 5, 10]"
                   :page-size="limit"
                   layout=" prev, pager, next, jumper,->,total, sizes"
                   :total="totalCount">
    </el-pagination>
  </div>
</template>

<script>
import SpuFrom from './spuFrom'
import SkuFrom  from './skuFrom'
export default {
  name: "Spu",
  props: {

  },
  components: {
    SpuFrom,
    SkuFrom
  },
  data () {
    return {
      isShowTable: true,
      // 分类的id
      category1Id: '',
      category2Id: '',
      category3Id: '',
      limit: 3,
      pageNum: 1,
      totalCount: 0,
      spuList: [],
      screen:0,
    };
  },
  methods: {
    // 三级联动 事件
    getCateList ({ categoryId, id }) {
      if (id === 1)
      {
        this.category1Id = categoryId
        this.category2Id = ''
        this.category3Id = ''
      } else if (id === 2)
      {
        this.category2Id = categoryId
        this.category3Id = ''
      } else
      {
        this.category3Id = categoryId
        this.getSpulist()
      }
    },
    // 获取spu列表
    async getSpulist (pages = 1) {
      this.pageNum = pages
      const { pageNum, limit, category3Id } = this
      let request = await this.$API.spu.reqSpuList(pageNum, limit, category3Id)
      if (request.code === 200)
      {
        this.totalCount = request.data.total
        this.spuList = request.data.records
      }
    },
    // 每页展示的  条数发生改变
    handleSizeChange (limit) {
      this.limit = limit
      this.getSpulist()
    },
    // 添加spu的回调
    addSpu(){
       this.screen =1
    },
    // 取消的回调
    changeScreen1(){
      this.screen =0
    },
    // 修改spu回调
    changeSpu(row){
      this.screen =1
      // 父组键调用子组件的方法
     this.$refs.screen1.initDate(row);
    }
  },
};
</script>

<style scoped lang="scss">
</style>
